Web BrowserのRenderingの流れ - mrsekut-p

Web BrowserのRenderingの流れ

LoadingからPaintingまでの流れをFrameと呼ぶ

流れ

これ4つに分けないほうがいいかもな、という気もしてるmrsekut.icon

Loading

Download(BrowserRendering)

Parse(BrowserRendering)

Rendering

Calculate Style(BrowserRendering)

Layout(BrowserRendering)

参考

『現場のプロから学ぶ SEO技術バイブル』 p.199~

『Webフロントエンドハイパフォーマンスチューニング』 2章~

Browser Engineの自作

https://web.dev/howbrowserswork/

https://qiita.com/mikimhk/items/7cfbd6c94d0f3d7aa51f

https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ja

https://browser.engineering/layout.html

https://coliss.com/articles/build-websites/operation/work/how-the-browser-renders-a-web-page.html

https://leap-in.com/ja/lets-learn-how-to-browser-works/

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://developers.google.com/web/updates/2018/09/inside-browser-part3

https://developers.google.com/web/fundamentals/performance/rendering/

https://qiita.com/codemafia0000/items/caed57ec30d638e40728

https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ja

https://zenn.dev/ak/articles/c28fa3a9ba7edb

https://www.yoheim.net/blog.php?q=20140703

https://zenn.dev/oreo2990/articles/280d39a45c203e